<script setup lang="ts">
import { colors } from '@/constants/injection-key'

const props = defineProps<{
  res: any
  disabled?: boolean // 如果禁用状态 不可点击，颜色变浅不展示不可使用
  disabledTips?: string
}>()

// 验证展示内容
function verifyShowSomething() {
  const data = props.res
  if (data.scopeType === 'PORTION_GOODS_CATEGORY') {
    return data.scopeName ? `仅限${data.scopeName.substring(data.scopeName.lastIndexOf(',') + 1, data.scopeName.length)}部分商品` : '仅限品类'
  }
  if (data.scopeType === 'ALL') {
    if (data.storeId === '0') {
      return '平台通用券'
    }
    else {
      return '店铺通用券'
    }
  }
  if (data.scopeType === 'PORTION_GOODS') {
    if (data.storeId === '0') {
      return '平台商品券'
    }
    else {
      return '店铺商品券'
    }
  }
  else {
    return `${data.storeName === 'platform' ? '全平台' : `${data.storeName}店铺`}使用`
  }
}
</script>

<template>
  <div py-16rpx px-32rpx>
    <div class="coupon" flex flex-a-c>
      <div w-242rpx flex flex-a-c flex-j-c flex-col>
        <div text-50rpx font-bold :style="{ color: disabled ? colors.disabledColor : colors.themeColor }">
          <div v-if="props.res.couponType !== 'DISCOUNT'">
            <span text-24rpx font-bold>￥</span>{{ props.res.price || 0 }}
          </div>
          <div v-if="props.res.couponType === 'DISCOUNT'">
            {{ props.res.couponDiscount || props.res.discount || 0 }} <span text-24rpx font-bold>折</span>
          </div>
        </div>
        <div
          v-if="props.res.couponType === 'PRICE'" text-24rpx mt-10rpx
          :style="{ color: disabled ? colors.disabledColor : colors.themeColor }"
        >
          满{{
            props.res.consumeThreshold }}元可用
        </div>
        <div v-else text-24rpx mt-10rpx :style="{ color: disabled ? colors.disabledColor : colors.themeColor }">
          无门槛
        </div>
      </div>
      <div px-32rpx :style="disabled ? { opacity: '.5' } : ''">
        <div flex w-full>
          <div flex flex-col>
            <div mb-20rpx max-w-48 text-red font-bold>
              {{ verifyShowSomething() }}
            </div>

            <div text-20rpx text-dark-color>
              <div v-if="props.res.endTime">
                有效期至:{{ props.res.endTime }}
              </div>
              <div v-if="props.res.endTime && props.disabled" mt-10rpx>
                {{ props.disabledTips || '优惠券已失效' }}
              </div>
            </div>
            <div mt-20rpx text-24rpx text-dark-color />
          </div>

          <slot name="append" />
        </div>
        <div>
          <slot name="footer" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.coupon {
  height: 200rpx;
  background: #fff6f6;
  -webkit-mask-image: radial-gradient(circle at 242rpx 20rpx, transparent 20rpx, red 11rpx),
    linear-gradient(transparent 25%, red 0, red 75%, transparent 0);
  -webkit-mask-size:
    100%,
    8rpx 32rpx;
  -webkit-mask-repeat: repeat, repeat-y;
  -webkit-mask-position:
    0 -20rpx,
    242rpx;
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
}
</style>
